<template>
    <!-- 面包屑导航 -->
    <div style="margin-top: 20px; margin-left: 20px">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><b>公告</b></el-breadcrumb-item>
            <el-breadcrumb-item>发布公告</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <!--发布公告按钮-->
    <el-button type="primary" @click="publishButton" style="margin-top: 20px; margin-left: 20px">发布公告</el-button>
    <!-- 折叠面板 -->
    <div class="demo-collapse">
        <el-collapse v-model="activeNames" @change="handleChange">

            <el-collapse-item
                v-for="item in announcements"
                :key="item.id"
                :title=" '&nbsp&nbsp&nbsp' + item.postTime + ' - ' + item.title"
                :name="item.id"
            >
                <div style="font-size: 16px;padding-left: 20px">{{ item.context }}</div>
            </el-collapse-item>
        </el-collapse>
    </div>
   <!-- 发布公告对话框 -->

    <el-dialog title="发布公告" v-model="dialogVisible" width="500">
            <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
                <el-form-item label="公告标题" prop="title">
                    <el-input
                        v-model="form.title"
                        style="width: 240px"
                        placeholder="请输入公告标题"
                        clearable
                    />
                </el-form-item>
                <el-form-item label="公告内容" prop="context">
                    <el-input
                        v-model="form.context"
                        style="width: 240px"
                        :autosize="{ minRows: 5, maxRows: 15 }"
                        type="textarea"
                        placeholder="请输入公告内容"
                    />
                </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelPublish">取消</el-button>
                <el-button type="primary" @click="confirmPublish">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import request8090 from "../../../../utils/request8090.js";
import {ElMessage} from "element-plus";

const activeNames = ref([]);
const announcements = ref([]);

onMounted(() => {
    fetchAnnouncements();
});

const formRef = ref(null);
// 敏感词
const sensitiveWords = ref(['敏感词1', '敏感词2']); // 添加或修改敏感词
// 敏感词校验
const validateSensitiveWords = (rule, value, callback) => {
    const foundWord = sensitiveWords.value.find(word => value.includes(word));
    if (foundWord) {
        callback(new Error(`公告内容不能包含敏感词：“${foundWord}”`));
    } else {
        callback();
    }
};
// 表单校验
const rules = {
    title: [
        { required: true, message: '公告标题不能为空', trigger: 'blur' },
        { max: 20, message: '公告标题不能超过20个字', trigger: 'blur' },
        { validator: validateSensitiveWords, trigger: 'blur' }
    ],
    context: [
        { required: true, message: '公告内容不能为空', trigger: 'blur' },
        { validator: validateSensitiveWords, trigger: 'blur' }
    ]
};

// 发布公告确认按钮
const confirmPublish = () => {
    formRef.value.validate((valid) => {
        if (valid) { // 发送请求
            request8090({
                url:'/admin/postannounce',
                method:'post',
                data: form.value
            }).then(res => {
                if (200==res.data.errorCode){
                    ElMessage.success('发布成功');
                    fetchAnnouncements()
                    cancelPublish()
                } else {
                    ElMessage.error('发布失败');
                }
            })
                .catch(error => {
                    console.error('请求失败:', error);
                    ElMessage.error('请求失败');
                });
        } else {
            ElMessage.error('表单验证失败');
            return false;
        }
    });
};
// 取消发布按钮
const cancelPublish = () => {
    form.value.title=''
    form.value.context=''
    dialogVisible.value = false;
};
// 发布公告数据
const form = ref({
    title: '',
    context: ''
})
// 发布公告按钮事件
const publishButton = () => {
    dialogVisible.value=true
};
const dialogVisible= ref(false)
// 获取公告
const fetchAnnouncements = () => {
    request8090({
        url: '/admin/getannounce',
        method: 'GET'
    })
        .then(response => {
            if (response.data.errorCode === 200) {
                announcements.value = response.data.data;
            } else {
                console.error('获取公告失败');
            }
        })
        .catch(error => {
            console.error('请求失败', error);
        });
};

// 处理折叠面板的展开和收起
const handleChange = (val) => {
    console.log('Active names:', val);
};
</script>

<style scoped>
.demo-collapse {
    margin: 20px;
}

.el-collapse-item__header {
    font-weight: bold;
    font-size: 30px;
}

.el-collapse-item__content {
    padding: 10px;
}
</style>
